<template>
<div style="height:100%;position: relative;background-color: #fff;">
<div class="topdiv">
  <div class="listdiv" style="-webkit-app-region:drag;">浏览器1.0测试版</div>
  <div style="display: inline-block;height:30px;" ref="p">
    <div v-for="(v,k) in winlist" class="listdiv" v-bind:class="{ 'is-active': k === nowkey }" v-if="v.show">
      <span class="listdivspan" @click="changeurl(k)" style="line-height:30px;">
        <img :src="v.src" style="width:15px;height:15px">
      </span>
      <span class="listdivspan" @click="changeurl(k)">{{v.title}}</span>
      <span class="listdivspan" style="margin-left:5px" @click="closeview(k)">
        <i class="iconfont icon-cuowuguanbiquxiao-xianxingyuankuang"></i>
      </span>
    </div>
  </div>
  
  <div class="listdiv" style="-webkit-app-region:drag;float:right;padding: 0 5px 0 16px;position: absolute;
    right: 0px;
    background-color: #eef1f6;margin-right:0px;">
    <a href="javascript:;" class="abutton" @click="gomini"><i class="iconfont icon-zuixiaohua aicon"></i></a>
    <a href="javascript:;" class="abutton" @click="gobig"><i class="iconfont icon-zuidahua1 aicon"></i></a>
    <a href="javascript:;" class="abutton" @click="closewin"><i class="iconfont icon-guanbi2 aicon"></i></a>
    <a href="javascript:;" class="abutton" @click="changebl"></a>
  </div>
</div>
<div style="height:100%;padding-top:30px;box-sizing:border-box;">
  <webview :id="k" :src="v.url" style="width:100%;height:100%;" v-for="(v,k) in winlist" v-show="k === nowkey" @did-finish-load="didfinish($event,k)" @page-title-updated="updatetitle($event,k)" @new-window="newwindow($event)" @page-favicon-updated="faviconupdate($event,k)" v-if="v.show" disableguestresize></webview>
</div>
</div>
</template>

<script>
export default {
  name: 'square',
  data () {
    return {
      winlist: [],
      nowkey: '',
      screenWidth: window.outerWidth - 185,
      topDivWidth: 815
    }
  },
  methods: {
    changebl: function () {
      console.log(this.screenWidth)
      console.log(this.$refs.p.clientWidth)
    },
    changeurl: function (k) {
      this.nowkey = k
    },
    pushurl: function (data) {
      this.winlist.push(data)
      this.nowkey = this.winlist.length - 1
    },
    newwindow: function (event) {
      const protocol = require('url').parse(event.url).protocol
      if (protocol === 'http:' || protocol === 'https:') {
        let data = {
          wid: '',
          iscontextmenu: false,
          show: true,
          title: '正在努力加载中。。。',
          src: 'static/loading.gif',
          url: event.url
        }
        this.pushurl(data)
      }
    },
    didfinish: function (event, key) {
      let win = event.target.getWebContents()
      if (!this.winlist[key].iscontextmenu) {
        let Menu = require('electron').remote.Menu
        let MenuItem = require('electron').remote.MenuItem
        let menu = new Menu()
        let imgUrl
        menu.append(new MenuItem({label: '下载图片',
          click () {
            console.log(imgUrl)
          }
        }))
        menu.append(new MenuItem({type: 'separator'}))
        menu.append(new MenuItem({label: '下载',
          click () {}}))
        win.on('context-menu', function (e, params) {
          if (params.mediaType === 'image') {
            imgUrl = params.srcURL
            menu.popup(win, params.x, params.y)
          }
        })
        this.winlist[key].iscontextmenu = true
      }

      win.insertCSS('::-webkit-scrollbar{width:8px ;height: 8px;};')
      win.insertCSS('::-webkit-scrollbar-track{background-color:#bee1eb;}')
      win.insertCSS('::-webkit-scrollbar-thumb{background-color:#00aff0 !important;};')
      win.insertCSS('::-webkit-scrollbar-thumb:hover {background-color:#9c3 !important;};')
      win.insertCSS('::-webkit-scrollbar-thumb:active {background-color:#00aff0 !important;}')
    },
    closeview: function (key) {
      this.winlist[key]['show'] = false
      if (this.nowkey === key) {
        // 递归查找可用页面
        let close = false
        let k = key
        let f = false
        let len = this.winlist.length - 1
        while (!this.winlist[k]['show']) {
          if (k > 0 && !f) {
            k--
          } else if (k < len) {
            k = !f ? key - 1 : k
            f = true
            k++
          } else {
            close = true
            break
          }
        }
        if (close) {
          this.closewin()
        } else {
          this.changeurl(k)
        }
      }
    },
    updatetitle: function (event, key) {
      this.winlist[key].title = event.title
    },
    faviconupdate: function (event, key) {
      this.winlist[key].src = event.favicons[0]
    },
    gomini: function () {
      let win = this.H.electron.remote.BrowserWindow.getFocusedWindow()
      win.minimize()
    },
    gobig: function () {
      let win = this.H.electron.remote.BrowserWindow.getFocusedWindow()
      console.log(win.isFullScreen())
      if (win.isFullScreen()) {
        win.setFullScreen(false)
      } else {
        win.setFullScreen(true)
      }
    },
    closewin: function () {
      let win = this.H.electron.remote.BrowserWindow.getFocusedWindow()
      win.close()
    }
  },
  computed: {
    showSlide: function () {
      return this.screenWidth - this.topDivWidth > 0 ? 0 : 1
    }
  },
  mounted: function () {
    this.pushurl({
      wid: '',
      iscontextmenu: false,
      show: true,
      title: '正在努力加载中。。。',
      src: 'static/loading.gif',
      url: 'http://www.baidu.com'
    })
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .spanindex{
    background-color: #91dea8;
      color: #fff;
      padding: 3px;
      border-radius: 3px;
      margin-left: 5px;
      cursor: pointer;
  }
  .listdiv{
    transition: all .3s cubic-bezier(.645,.045,.355,1);
      border: 1px solid transparent;
      border-top: 0;
      margin-right: -1px;
      margin-left: -1px;
      padding: 0 16px;
      height: 30px;
      box-sizing: border-box;
      line-height: 30px;
      display: inline-block;
      list-style: none;
      font-size: 14px;
      color: #8391a5;
      position: relative;
      cursor: pointer;
      max-width: 200px;
      overflow: hidden;
      -webkit-app-region: no-drag;
  }
  .topdiv{
    height:30px;
    position: absolute;
    top: 0px;
    background-color: #eef1f6;
    border-bottom: 1px solid #d1dbe5;
    width: 100%;
    margin-bottom: -1px;
    white-space:nowrap;
    text-align: left;
    -webkit-app-region:drag;
    overflow: hidden;
  }
  .listdivspan{
      display: inline-block;
      list-style: none;
      font-size: 14px;
      color: #8391a5;
      position: relative;
      max-width: 130px;
      overflow: hidden;
  }
  body{
    margin:0px;
  }
  .is-active{
    background-color: #fff;
      border-right-color: #d1dbe5;
      border-left-color: #d1dbe5;
      color: #20a0ff;
  }
  .abutton{
    -webkit-app-region: no-drag;
    cursor: pointer;
    display: inline;
  }
</style>
